<template>
  <div class="commission-trend-chart">
    <div v-if="loading" class="chart-loading">
      加载中...
    </div>
    <div v-else ref="chartRef" class="chart-container"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, defineProps, nextTick } from 'vue';
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必需的组件
echarts.use([
  LineChart,
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  CanvasRenderer
]);

// 定义组件属性
const props = defineProps({
  chartData: {
    type: Array,
    required: true
  }
});

// 图表DOM引用
const chartRef = ref(null);
// 图表实例
let chartInstance: echarts.ECharts | null = null;
// 加载状态
const loading = ref(true);

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;
  
  // 创建图表实例
  chartInstance = echarts.init(chartRef.value);
  
  // 设置加载状态
  loading.value = true;
  
  // 更新图表
  updateChart();
};

// 更新图表数据
const updateChart = () => {
  if (!chartInstance || !props.chartData || props.chartData.length === 0) {
    loading.value = false;
    return;
  }
  
  // 准备数据
  const months = props.chartData.map(item => item.month);
  const commissions = props.chartData.map(item => item.commission);
  
  // 配置图表选项
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        const data = params[0].data;
        return `${params[0].axisValue}<br />佣金: ¥${data.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}`;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: months,
      axisLine: {
        lineStyle: {
          color: '#ddd'
        }
      },
      axisLabel: {
        color: '#666'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#666',
        formatter: function(value) {
          if (value >= 1000) {
            return '¥' + (value / 1000).toFixed(1) + 'k';
          }
          return '¥' + value;
        }
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    series: [
      {
        name: '佣金',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#FF4757'
        },
        lineStyle: {
          width: 3,
          color: '#FF4757'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255,71,87,0.3)' },
            { offset: 1, color: 'rgba(255,71,87,0.1)' }
          ])
        },
        data: commissions
      }
    ]
  };
  
  // 设置图表选项
  chartInstance.setOption(option);
  
  // 更新加载状态
  loading.value = false;
};

// 处理窗口大小变化
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};

// 在组件挂载后初始化图表
onMounted(() => {
  nextTick(() => {
    initChart();
    window.addEventListener('resize', handleResize);
  });
});

// 监听数据变化
watch(() => props.chartData, () => {
  nextTick(() => {
    if (chartInstance) {
      updateChart();
    } else {
      initChart();
    }
  });
}, { deep: true });

// 组件卸载前清理
const onUnmounted = () => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  window.removeEventListener('resize', handleResize);
};
</script>

<style lang="scss" scoped>
.commission-trend-chart {
  width: 100%;
  height: 100%;
  position: relative;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.chart-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  color: #999;
}
</style> 